<template>
  <div id="select">
    <span @click="chooseAll" :class="[sel=='全部'?'active':'']">全部</span>
    <span v-for="(v,i) in json" :key="i" @click="chooseLetter(v,i)" :class="[sel==i?'active':'']">{{i}}</span>

  </div>
</template>
<style scoped>
#select span {
  display: inline-block;
  width: 2%;
  text-align: center;
  cursor: pointer;
}
#select span:first-child {
  width: 3.5%;
}
.active {
  background-color: #bdf9ff;
}
</style>
<script>
export default {
  name: "letterlist",
  data() {
    return {

      json: {
        // "全部": ['', ''],
        'A': ['吖', '驁'],
        'B': ['八', '簿'],
        'C': ['嚓', '錯'],
        'D': ['咑', '鵽'],
        'E': ['妸', '樲'],
        'F': ['发', '鰒'],
        'G': ['猤', '腂'],
        'H': ['妎', '夻'],
        'J': ['丌', '攈'],
        'K': ['咔', '穒'],
        'L': ['垃', '鱳'],
        'M': ['嘸', '旀'],
        'N': ['丆', '桛'],
        'O': ['噢', '漚'],
        'P': ['妑', '曝'],
        'Q': ['七', '囕'],
        'R': ['呥', '鶸'],
        'S': ['仨', '蜶'],
        'T': ['他', '籜'],
        'W': ['屲', '鶩'],
        'X': ['夕', '鑂'],
        'Y': ['丫', '韻'],
        'Z': ['帀', '咗']
      },
      selected: "",
      selected1: "",
      alphabet: "",
      sel: ""
    };
  },
  methods: {
    chooseLetter(v, i) {
      this.sel = i
      this.selected = v[0]
      this.selected1 = v[1]
      this.alphabet = i
      this.$store.commit("setLetter", { //传入仓库
        selected: this.selected,
        selected1: this.selected1,
        alphabet: this.alphabet
      });
    },
    chooseAll() {
      this.sel = '全部'
      this.selected = ""
      this.selected1 = ""
      this.alphabet = ""
      this.$store.commit("setLetter", { //传入仓库
        selected: this.selected,
        selected1: this.selected1,
        alphabet: this.alphabet
      });
    },
  },
  computed: {

  }
};
</script>
